iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 30
0
自我挑戰組

大器可以晚成—— 30歲才開始的轉職工程師之路系列 第 30

[ Day 30 | CSS ] 用 clip-path 繪製多邊形

  • 分享至 

  • xImage
  •  

之前一直很好奇有些網站的背景圖片是如何裁切成不同形狀的,
除了本來就放置裁切好的圖片以外不知道還有沒有別的作法?
結果昨天突然發現 clip-path 這個寫法。

使用時的注意事項

  • 雖然目前基本上只有 IE 和 Opera 等瀏覽器不能支援外,其他除了 Fire Fox 外的瀏覽器建議加上 webkit 來撰寫。
  • clip-path 可做到單一 div 繪製成多邊形的功能,像以前在 Day 2 提到的偽完素,是利用寬高來控制圖案,而clip-path 則是需要去控制它每個點的座標。
  • 記得先定義好圖片的寬高。座標控制是以比例去計算,若沒先設定好的話畫出來的圖形可能會怪怪的 XD
  • 座標設定須向同一個方向進行,這個圖形你決定用順時針就全部順時針、逆時針就全部逆時針。

各種形狀範例

平行四邊形

clip-path: polygon(第一點的 XY 軸座標, 第二點座標, 第三點座標, 第四點座標);

-webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);

https://ithelp.ithome.com.tw/upload/images/20201013/20129145q6c1xtSRrp.png

圓形

clip-path: circle(半徑 at 圓心座標);

-webkit-clip-path: circle(50% at 50% 50%);

https://ithelp.ithome.com.tw/upload/images/20201013/20129145L3zGF7GE7R.png

橢圓形

clip-path: ellipse(短、長軸半徑 at 圓心座標);

-webkit-clip-path: ellipse(25% 40% at 50% 50%);

https://ithelp.ithome.com.tw/upload/images/20201013/20129145WPwqTR42pW.png

對話框

-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

https://ithelp.ithome.com.tw/upload/images/20201013/20129145fb93M5jSGk.png


還有很多形狀可以發揮創意變換,
或是參考這個網站,可以更了解 X 軸及 Y 軸的設定方式。

最後的最後,第一次的鐵人賽,今天正式完賽啦!!!(灑花)
因為是第一次用這個平台寫作,回顧第一篇到現在寫作模式也有點不同了,實在是很有趣。
期間不僅複習了舊知識也學到的一些新的東西,三十天的挑戰真的是所謂甜蜜的負荷。

努力完賽的我,真了不起!!
繼續努力,快快達成短期目標吧:D


上一篇
[ Day 29 | Essay ] 作夢也會夢到內心最深刻的恐懼
系列文
大器可以晚成—— 30歲才開始的轉職工程師之路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言